<template>
	<view class="container">
		<wd-swiper
			v-if="swiperList.length"
			value-key="cover_img"
			:list="swiperList"
			autoplay
			v-model:current="swiperIdenx"
			:indicator="false"
			height="260rpx"
			@click="handleSwiperClick"
		></wd-swiper>
		<wd-tabs v-model="tabIndex" slidable="always" swipeable animated @change="handleTabChange">
			<block v-for="(item, index) in categoryList" :key="item.id || index">
				<wd-tab :title="item.name">
					<q-post-list :postList="item.postList" :loadStatus="loadStatus" @postClick="goToPostDetail"></q-post-list>
				</wd-tab>
			</block>
		</wd-tabs>
	</view>
	<q-tabbar :selected="0"></q-tabbar>
</template>

<script setup>
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { baseAPI } from '@/api/index.js';

const swiperList = ref([]);

const swiperIdenx = ref(0);
const tabIndex = ref(0);
const categoryList = ref([]);
const loadStatus = ref('more');

onLoad(() => {
	getCategory();
	getLink();
});

onShow(() => {});

onReachBottom(() => {
	categoryList.value[tabIndex.value].page++;
	getPostList();
});

onPullDownRefresh(() => {
	getCategory();
	uni.stopPullDownRefresh();
});

function handleSwiperClick({ item }) {
	//跳转页面
	if (item.type == 1) {
		uni.navigateTo({
			url: item.url
		});
	}

	//跳转外部小程序
	if (item.type == 2) {
		uni.navigateToMiniProgram({
			appId: item.app_id,
			path: item.url
		});
	}

	//跳转页面
	if (item.type == 3) {
		uni.navigateTo({
			url: `/pages/webview?url=${item.url}&title=${item.title}`
		});
	}
}

function handleTabChange({ index, name }) {
	tabIndex.value = index;
	if (categoryList.value[index].postList.length === 0) {
		getPostList();
	}
}

function getCategory() {
	baseAPI.get('category/getList').then((res) => {
		if (res.code === 200) {
			categoryList.value = [
				{
					id: '',
					name: '推荐',
					postList: [],
					page: 1
				},
				...res.result.map((item) => ({
					...item,
					postList: [],
					page: 1
				}))
			];

			getPostList();
		}
	});
}

function getPostList() {
	const category = categoryList.value[tabIndex.value];
	loadStatus.value = 'loading';

	baseAPI
		.post('post/getListByPage', {
			page: categoryList.value[tabIndex.value].page || 1,
			queryForm: {
				category_id: category?.id || ''
			}
		})
		.then((res) => {
			if (res.code === 200) {
				categoryList.value[tabIndex.value].postList = categoryList.value[tabIndex.value].postList.concat(res.result.list);
				loadStatus.value = res.result.hasMore ? 'more' : 'nomore';
			}
		});
}

function goToPostDetail(postId) {
	uni.navigateTo({
		url: `/pages/post/detail?id=${postId}`
	});
}

function getLink() {
	baseAPI.get('link/getList').then((res) => {
		if (res.code == 200) {
			swiperList.value = res.result;
		}
	});
}
</script>

<style lang="scss" scoped>
:deep(.wd-tabs) {
	background-color: unset !important;
}

:deep(.wd-tabs__nav) {
	background-color: unset !important;
	margin-bottom: 20rpx;
}

:deep(.wd-tabs__nav-item) {
	padding: 0 20rpx !important;

	&:last-child {
		padding-left: 0 !important;
	}
}
</style>
